Swego czasu najbardziej spektakularnym rozszerzeniem jêzyka HTML 1.0 do wersji 2.0 by³o wprowadzenie mo¿liwoœci wyœwietlania danych w postaci tabelarycznej. Trzonem samej tabeli definiowanej w jêzyku HTML jest element <TABLE>...</TABLE>. Standardowo tabela pozbawiona jest krawêdzi. Wystarczy jednak zadeklarowaæ atrybut BORDER w pierwszej etykiecie <TABLE>, a wokó³ tabeli oraz pomiêdzy jej komórkami pojawi¹ siê trójwymiarowe linie. Gdy dodatkowo nadamy temu atrybutowi wartoœæ, okreœlona zostanie gruboœæ ramki obramowuj¹cej tabelê.
Przyjrzyjmy siê zatem prostemu przyk³adowi tabeli:
<TABLE BORDER> <TR><TH>Nag³ówek 1<TH>Nag³ówek 2<TH>Nag³ówek 3 <TR><TD>1 <TD>abc <TD>ABC <TR><TD>2 <TD>def <TD>DEF </TABLE>
Nawet najprostsza tabela powinna posiadaæ nag³ówki
Byæ mo¿e na pocz¹tku nie wygl¹da to zbyt zachêcaj¹co, jednak ju¿ po krótkiej chwili mo¿na zauwa¿yæ, ¿e tabela posiada okreœlon¹ strukturê (dla u³atwienia wpisano w odpowiednich miejscach dodatkowe spacje). Element <TR>, wystêpuj¹cy na pocz¹tku ka¿dej linii, to deklaracja nowego wiersza tabeli. Z kolei nastêpuj¹ce po sobie etykiety <TD> lub <TH> oznaczaj¹ definicjê kolejnych jej komórek w wierszu, po których wpisuje siê tekst (wyœwietlany bezpoœrednio w komórkach). Element <TH> (table header) tym ró¿ni siê od <TD> (table data), ¿e zawartoœæ komórki, któr¹ on reprezentuje wyœwietlana jest pogrubion¹ czcionk¹ i tekst wyrównywany jest do jej œrodka (<TD> wyœwietla tekst w sposób standardowy). Takie komórki nag³ówkowe s¹ najczêœciej u¿ywane do nadawania nazw kolumnom lub wierszom (porównaj przyk³ad).
Czêsto dochodzi do sytuacji, gdy jeden nag³ówek mo¿e opisywaæ wiele kolumn lub wierszy naraz. W profesjonalnych edytorach tekstu obs³uguj¹cych tabele zwykle mo¿emy skorzystaæ z opcji ³¹czenia kilku komórek w jedn¹. W standardzie HTML równie¿ nie zabrak³o takiej mo¿liwoœci. Ilustruje to poni¿szy przyk³ad:
<TABLE BORDER> <CAPTION> Wydatki w marcu <CAPTION> <TR><TH ROWSPAN=4>Wydatki<TD>samochód <TD>189 <TR> <TD>mieszkanie<TD>250 <TR> <TD>jedzenie <TD>353 <TR> <TD>dzieci <TD>245 <TR><TD COLSPAN=2>Suma <TD>1037 </TABLE>
Tabela wraz ze zwielokrotnionymi komórkami i podpisem
Tabela ta przedstawia proste zestawienie wydatków domowych rodziny X w marcu. Tak¹ informacjê mo¿emy odczytaæ z opisu tabeli, czyli tekstu zawartego
pomiêdzy ogranicznikami elementu <CAPTION>. W tym przypadku tekst opisu wyœwietlany jest nad tabel¹ i wyrównywany centralnie. Oczywiœcie za pomoc¹
atrybutu ALIGN mo¿liwe s¹ pozosta³e warianty justowania. W przypadku wiêkszoœci przegl¹darek dopuszcza siê tylko dwie opcje dla etykiety <CAPTION>: top
(domyœlna) oraz bottom (tekst opisu umieszczany jest pod tabel¹).
Na zamieszczonym na tej stronie ekranie komórki „Wydatki" oraz „Suma" sk³adaj¹ siê z wiêkszej liczby mniejszych komórek. Spowodowane jest to tym, ¿e w
niektórych elementach <TD> oraz <TH> zosta³y zastosowane specjalne atrybuty ROWSPAN oraz COLSPAN. S¹ one odpowiedzialne za ³¹czenie kilku komórek
w jedn¹. Pierwszy ³¹czy komórki znajduj¹ce siê w jednej kolumnie (wyd³u¿enie w dó³), drugi zespala je w ramach jednego wiersza (rozszerzenie na prawo).
Wartoœci tych atrybutów okreœlaj¹ liczbê komórek z jakiej bêdzie siê sk³adaæ komórka ³¹czona (domyœlnie przyjmowana jest wartoœæ 1). Podczas
konstruowania tabeli i stosowania komórek ³¹czonych nale¿y pamiêtaæ o zachowaniu spójnoœci tabeli. Ka¿de wyd³u¿enie komórki (na przyk³ad w dó³ za pomoc¹
ROWSPAN) poci¹ga za sob¹ koniecznoœæ zmniejszenia deklaracji komórek w kolejnym wierszu lub kolumnie (porównaj przyk³ad). Niezachowanie spójnoœci
tabeli prowadzi zwykle do bardzo dziwnych efektów. Przyk³adowo niedopuszczalna jest przedstawiona poni¿ej sytuacja:
<TABLE BORDER> <TR><TH ROWSPAN=3>Komórka wyd³u¿ona o 2 w dó³ <TD>A <TR> <TD>B <TR><TD>X (!!! Element niedopuszczalny !!!) <TD>C </TABLE>
Istnieje wiele mo¿liwoœci formatowania, wyrównywania tabel i okreœlania sposobu ich wyœwietlania. Jednym z podstawowych parametrów tabeli jest jej wysokoœæ i szerokoœæ. Atrybutami odpowiedzialnymi za te wielkoœci s¹ znane nam ju¿ WIDTH oraz HEIGHT umieszczane w deklaracji elementu <TABLE>. Jako ich wartoœæ mo¿e byæ podawana liczba pikseli oraz wartoœæ procentowa, odnosz¹ca siê do parametrów okna przegl¹darki. Przyk³ad:
<TABLE BORDER WIDTH=50% HEIGHT=200>
Ka¿dy element <TD> oraz <TH> mo¿e byæ równie¿ dodatkowo „wyposa¿ony" w powy¿sze atrybuty. W tym przypadku wartoœci procentowe odwo³uj¹ siê do parametrów wielkoœci samej tabeli.
Za odleg³oœæ pomiêdzy komórkami odpowiedzialny jest CELLSPACE. Zwykle towarzyszy mu atrybut o podobnej nazwie (CELLPADDING), który ustala wielkoœæ „marginesu", jaki jest przydzielany zawartoœci wszystkich komórek (tzn. odleg³oœci tekstu od krawêdzi komórki). Na przyk³ad:
<TABLE BORDER=2 CELLSPACE=1 CELLPADDING=5>
Wspomniano ju¿ mo¿liwoœci wyrównywania tabeli wzglêdem ca³ego dokumentu. Jak zwykle, do pracy zostaje zaprzêgniêty atrybut ALIGN dopuszczaj¹cy
w tym przypadku dwie wartoœci left oraz right, co powoduje identyczne zachowanie tabeli jak by³o to w przypadku elementu <IMG> z zastosowaniem
podobnych parametrów (porównaj kilka stron wy¿ej). Warto równie¿ pamiêtaæ o elemencie <BR> z atrybutem CLEAR.
Co siê zaœ tyczy formatowania zawartoœci pojedynczych komórek, to tutaj równie¿ mo¿na dysponowaæ narzêdziami do wyrównywania tekstu. Odbywa siê to podobnie jak to by³o w przypadku elementu opisu tabeli (porównaj etykieta <CAPTION>). Dla elementów <TR>, <TD> oraz <TH> mo¿na stosowaæ atrybut ALIGN z wartoœciami left, right oraz center (wyrównanie w poziomie odpowiednio do krawêdzi lewej, prawej oraz œrodka komórki). Dostêpny jest równie¿ atrybut VALIGN z parametrami top (górna krawêdŸ komórki) i bottom (dolna krawêdŸ komórki). Gdy u¿yje siê ich dla elementu <TR>, wszystkie komórki w tym wierszu bêd¹ posiada³y takie same w³aœciwoœci.
Warto na koniec podkreœliæ, ¿e zawartoœæ poszczególnych komórek nie musi stanowiæ czystego tekstu. Praktycznie mo¿liwe jest wstawienie do tabeli prawie ka¿dego elementu HTML (na przyk³ad odnoœników, obrazków, a nawet innych tabel). Pozwala to na uzyskanie bardzo ciekawych efektów i daje du¿e mo¿liwoœci eksperymentowania, co z pewnoœci¹ mo¿e zachwyciæ niejednego fana WWW.
